<template>
	<view class="vi_loading" :class="{'vi_loading_show':show}"
		:style="{
			'transition':'opacity '+setting.transition+'s',
			'z-index':setting.zIndex
		}">
		<view class="vi_loading_mask" :style="{'z-index':setting.zIndex-1}" v-if="useMask&&show"></view>
		<view class="vi_loading_content" :class="'vi_loading_'+setting.type"
			:style="{
				'z-index':setting.zIndex,
				'width':setting.sizeNum+'em',
				'height':setting.sizeNum+'em'
			}">
			<view class="full fbox V y-center">
				<slot>
					<text class="vi_loading_tip" :style="{'font-size':setting.sizeNum/4+'em'}">加载中</text>
				</slot>
			</view>
		</view>
		<view class="vi_loading_animation" :class="setting.loadingMode"
			:style="{
				'width':setting.sizeNum+'em',
				'height':setting.sizeNum+'em'
			}">
			<view class="vi_loading_dot" v-for="index of elmCount" :key="index"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"viLoading",
		props:{
			type:{
				type:[String,null],
				default:""
			},
			//大小数值，单位em
			sizeNum:{
				type:[Number,null],
				default:null
			},
			//在popup之下
			zIndex:{
				type:[Number,null],
				default:null
			},
			//加载动画类型，来自样式定义文件
			loadingMode:{
				type:[String,null],
				default:null
			},
			useMask:{
				type:[Boolean,null],
				default:false
			},
			loading:{
				type:[Boolean,null],
				default:false
			},
			//过渡时间
			transition:{
				type:[Number,null],
				default:0
			}
		},
		data() {
			return {
				show:false,
				closeTimer:null
			}
		},
		computed: {
			setting(){
				return {
					type: this.type =="black"? "black" :"white",
					sizeNum: this.$api.isValue(this.sizeNum)? this.sizeNum :5,
					zIndex: this.$api.isValue(this.zIndex)? this.zIndex :89,
					loadingMode: this.$api.isDefined(this.loadingMode)? this.loadingMode :"rotateRing-3",
					transition: this.transition ||0.3
				}
			},
			elmCount(){
				let cls = this.setting.loadingMode;
				let count = cls.split("-")[1];
				return Number(count) ||1;
			},
		},
		methods: {
			
		},
		watch:{
			"loading":{
				immediate:true,
				handler(newVal){
					if(newVal){//打开
						if(this.closeTimer){
							clearTimeout(this.closeTimer);
							this.closeTimer =null;
						}
						this.show = true;
					}else{//关闭，延迟
						if(this.closeTimer){
							clearTimeout(this.closeTimer);
						}
						this.closeTimer =setTimeout(()=>{
							this.show = false;
						},400)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.vi_loading{
	pointer-events: none;
	opacity: 0;
	position: relative;
	.vi_loading_mask{
		pointer-events: initial;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	&.vi_loading_show{
		opacity: 1
	}
	.vi_loading_content{
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%,-50%);
		border-radius: 50%;
	}
	.vi_loading_animation{
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	//主题色
	.vi_loading_black{
		background: rgba(0,0,0,0.75);
		border: 1px solid rgba(255,255,255,0.5);
		box-shadow: 0 0 0.25em rgba(0,0,0,0.5);
		.vi_loading_tip{
			color: rgba(255, 255, 255, 0.75);
		}
	}
	.vi_loading_white{
		background: linear-gradient(to bottom, #fff 10%, #eee 100%);
		border: 1px solid #ddd;
		box-shadow: 0 0 0.25em rgba(0,0,0,0.25), 0 -0.1em 0.25em rgba(255,255,255,0.5) inset;
		.vi_loading_tip{
			color: rgba(0, 0, 0, 0.5);
		}
	}
}

//主题样式
@import "./vi-loading.scss";
</style>